<template>
    <router-link tag="div" class="association-news-item" :key="item.id" :to="{name: 'association-newsdetail', params: {id: item.id}}">
			<div class="imgOut" :style="{backgroundImage:`url(${item.mainPicture})`}">
			</div>
			<div class="info">
				<h3>{{item.title}}</h3>
				<p class="overText">{{item.description}}</p>
				<p>{{item.createTime}}</p>
			</div>
		</router-link>
</template>

<script>
export default {
  name: 'association-news-item',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    }
  }
}
</script>

<style scoped lang="less">
.association-news-item{
	box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
	border-radius: 5px;
	margin: 10px 0;
	padding: 10px;
	display:flex;
	.imgOut {
		display: inline-block;
		width: 209/2px;
		height: 139/2px;
		flex: 0 0 209/2px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	.info{
		width: 50%;
		margin-left:3%;
		flex:1;
		h3{
			font-size: 16px;
			font-weight: bold;
			padding-bottom:3px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		p{padding-bottom:3px;}
		.overText{
			margin:5px 0;
			overflow: hidden;
			max-height: 22px;
			word-break: break-all;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -webkit-inline-box;
		}
	}
}
</style>
